Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: vanilla CSS color scheme changes #3996

Merged
merged 10 commits into from
Jun 22, 2024
Merged

feat: vanilla CSS color scheme changes #3996

merged 10 commits into from
Jun 22, 2024

Conversation

SychO9
Copy link
Member

@SychO9 SychO9 commented Jun 8, 2024

Fixes #0000

Changes proposed in this pull request:
Changes the LESS/CSS code to be able to switch color schemes using Vanilla CSS (browser level) rather than having to recompile all of the LESS code based on configuration values.

This also means the ability to easily have per-user color scheme preferences, so this PR also adds the ability to select a color scheme per user while checking the user system's color scheme preference as default.

This also removes the @config-dark-mode and @config-colored-header less variables as they are no longer used and should no longer be used in extensions in 2.0.

Instead one can do:

[data-theme=dark] {
  .my-element { ... }
}

[data-colored-header=true] {
  .my-element { ... }
}

Additionally, this will allow easily adding high contrast color schemes and the like for a11y (accessibility).

Screenshot
image
image

Necessity

  • Has the problem that is being solved here been clearly explained?
  • If applicable, have various options for solving this problem been considered?
  • For core PRs, does this need to be in core, or could it be in an extension?
  • Are we willing to maintain this for years / potentially forever?

Confirmed

  • Frontend changes: tested on a local Flarum installation.
  • Backend changes: tests are green (run composer test).
  • Core developer confirmed locally this works as intended.
  • Tests have been added, or are not appropriate here.

Required changes:

  • Related documentation PR: (Remove if irrelevant)
  • Related core extension PRs: (Remove if irrelevant)

@SychO9 SychO9 requested a review from a team as a code owner June 8, 2024 09:42
@SychO9
Copy link
Member Author

SychO9 commented Jun 14, 2024

Added High contrast schemes for a11y

image
image

@SychO9 SychO9 merged commit b91caec into 2.x Jun 22, 2024
15 of 28 checks passed
@SychO9 SychO9 deleted the sm/vanilla-css branch June 22, 2024 07:05
@SychO9 SychO9 added this to the 2.0 milestone Jun 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants